<template>
	<view class="staff-order-details">
		<!-- 师傅端 订单已完成详情 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">订单详情</text>
			</view>
		</u-navbar>

		<view
			class="authentication-container w-750 b-box  po-re"
			style="padding: 0 24rpx;background-color: #F7F8F9;"
			:style="{ height: containerHeight }"
		>
			<scroll-view scroll-y="true" :style="{ height: containerHeight }">
				<view class="b-box " style="padding-bottom: 70rpx;" v-if="data">
					<!-- 1 -->
					<view
						class="b-box bg-ff"
						style="width: 702rpx;min-height: 326rpx;border-radius: 16rpx;margin-top: 20rpx; padding:24rpx 24rpx 0"
					>
						<!-- img -->
						<view class="d-flex flex-r ali-i-s just-s b-box" style="min-height: 140rpx;">
							<view
								style="width: 140rpx;height: 140rpx;border-radius: 16rpx;overflow: hidden;margin-right: 24rpx;"
							>
								<image :src="data.catimage" style="width: 140rpx;height: 140rpx;" mode=""></image>
							</view>
							<view class="d-flex flex-c ali-i-s just-s">
								<text class="pf-sc fw-500 c-333" style="font-size: 30rpx;margin-bottom: 12rpx;">
									{{ data.catname }}
								</text>
								<view class="d-flex flex-r ali-i-c just-s">
									<text class="pf-sc fw-600 po-re" style="font-size: 18rpx;color: #FF5C00;top:4rpx">
										¥
									</text>
									<text class="pf-sc fw-600 " style="font-size: 28rpx;color: #FF5C00;">
										{{ data.money }}
									</text>
								</view>
							</view>
						</view>
						<!--  -->
						<view class="d-flex b-box flex-c ali-i-c just-c" style="min-height: 161rpx;">
							<view class="d-flex flex-r ali-i-c just-sw w-100" style="height: 78rpx;">
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">优惠券</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#FF5C00">
									￥{{ data.yhmoney }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 82rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">支付金额</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#FF5C00">
									￥{{ data.money }}
								</text>
							</view>
						</view>
					</view>
					<!-- 2 -->
					<view class="w-100 b-box d-flex flex-r ali-i-c just-s" style="margin:24rpx 0 16rpx;">
						<text class="fw-500 c-333 pf-sc" style="font-size: 30rpx;">订单信息</text>
					</view>
					<view
						class="b-box bg-ff"
						style="width: 702rpx;min-height: 326rpx;border-radius: 16rpx;margin-top: 20rpx; padding:24rpx 24rpx 0"
					>
						<!--  -->
						<view class="d-flex b-box flex-c ali-i-c just-c">
							<view class="d-flex flex-r ali-i-c just-sw w-100">
								<view class="pf-sc fw-400" style="font-size: 28rpx;color:#666666;width: 150rpx;">
									车辆位置
								</view>
								<view
									class="pf-sc fw-400"
									style="font-size: 28rpx;color:#555555;width: 600rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
								>
									{{ data.caraddress }}
								</view>
							</view>
							<view
								class="d-flex flex-r ali-i-c w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;justify-content: space-between;"
							>
								<view class="pf-sc fw-400" style="font-size: 28rpx;color:#666666;width: 150rpx;">
									停靠位置
								</view>
								<view
									class="pf-sc fw-400"
									style="text-align: right; font-size: 28rpx;color:#555555;width: 600rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
								>
									{{ data.cardesc }}
								</view>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 76rpx;border-top: 2rpx solid #eeeeee;"
							>
								<view class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">车辆信息</view>
								<view class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ data.cardetail }}/{{ data.serverlog[0].mobile }}
								</view>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">服务项目</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ data.catname }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 76rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">服务时间</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ data.servertime }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<view class="pf-sc fw-400" style="font-size: 28rpx;color:#666666;width: 150rpx;">
									备注信息
								</view>
								<view
									class="pf-sc fw-400"
									style="font-size: 28rpx;color:#555555;width: 600rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
								>
									{{ data.remarks }}
								</view>
							</view>
						</view>
					</view>
					<!--3  -->
					<view
						class="w-100 b-box d-flex flex-r ali-i-c just-s"
						style="margin:24rpx 0 16rpx;"
						v-if="data.isorder == 1"
					>
						<text class="fw-500 c-333 pf-sc" style="font-size: 30rpx;">师傅信息</text>
					</view>
					<view
						v-if="data.isorder == 1"
						class="b-box bg-ff"
						style="width: 702rpx;min-height: 242rpx;border-radius: 16rpx;margin-top: 20rpx; padding:24rpx 24rpx 0"
					>
						<!--  -->
						<view class="d-flex b-box flex-c ali-i-c just-c">
							<view class="d-flex flex-r ali-i-c just-sw w-100" style="height: 78rpx;">
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">师傅</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ data.workername }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">师傅电话</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ data.workermobile }}
								</text>
							</view>
							<!-- 							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 76rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">师傅起点</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{data.workeraddress}}
								</text>
							</view> -->
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">订单距离</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ data.workerdistance ? data.workerdistance : 0 }}km
								</text>
							</view>
						</view>
					</view>
					<!--4  -->
					<view class="w-100 b-box d-flex flex-r ali-i-c just-s" style="margin:24rpx 0 16rpx;">
						<text class="fw-500 c-333 pf-sc" style="font-size: 30rpx;">其他信息</text>
					</view>
					<view
						class="b-box bg-ff"
						style="width: 702rpx;min-height: 242rpx;border-radius: 16rpx;margin-top: 20rpx; padding:24rpx 24rpx 0"
					>
						<!--  -->
						<view class="d-flex b-box flex-c ali-i-c just-c">
							<view class="d-flex flex-r ali-i-c just-sw w-100" style="height: 78rpx;">
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">订单编号</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ data.orderno }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">下单时间</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ data.createtime }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">付款时间</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ data.paytime_text }}
								</text>
							</view>
						</view>
					</view>
					<!-- 5 -->
					<view class="w-100 b-box d-flex flex-r ali-i-c just-s" style="margin:24rpx 0 16rpx;">
						<text class="fw-500 c-333 pf-sc" style="font-size: 30rpx;">订单日志</text>
					</view>
					<view
						class="b-box bg-ff custom-step"
						style="width: 702rpx;min-height: 242rpx;border-radius: 16rpx;margin-top: 20rpx; padding:44rpx 40rpx 0"
					>
						<!--  -->
						<u-steps
							:current="0"
							direction="column"
							:dot="true"
							activeColor="#CC987A"
							inactiveColor="#CC987A"
						>
							<u-steps-item
								v-for="(item, index) in data.serverlog.slice(0, 5)"
								:key="index"
								:title="item.msg"
								:desc="item.time + ' ' + '手机号' + item.mobile"
							></u-steps-item>
							<!-- 第六个 -->
							<u-steps-item
								v-if="data.serverlog.length >= 6"
								:title="list6.msg"
								:desc="list6.time + ' ' + '手机号' + list6.mobile"
							></u-steps-item>

							<view class="list6" style="margin-left: 35rpx;margin-top: -40rpx;position: relative;" v-if="data.serverlog.length >= 6">
								<view
									style="width: 2rpx;height: 90rpx;background-color: #CC987A;position: absolute;top: 38rpx;left: -26rpx;"
								></view>
								<image
									v-for="(img6, index6) in list6.workerimages"
									:key="index6"
									:src="img6"
									style="width: 108rpx;height: 108rpx;margin-right: 20rpx;"
									@click="getImg1(img6,index6)"
								></image>
							</view>
							<!-- 第7个 -->
		
								<u-steps-item
									class="ustepsitem7"
									v-if="data.serverlog.length >= 7"
									:title="list7.msg"
									:desc="list7.time + ' ' + '手机号' + list7.mobile"
								></u-steps-item>


							<view class="list7" style="margin-left: 35rpx;margin-top: -40rpx;position: relative;" v-if="data.serverlog.length >= 7">
								<view
									style="width: 2rpx;height: 90rpx;background-color: #CC987A;position: absolute;top: 38rpx;left: -26rpx;"
									v-if="data.serverlog.length > 7"
								></view>
								<image
									v-for="(img7, index7) in list7.wrimages"
									:key="index7"
									:src="img7"
									style="width: 108rpx;height: 108rpx;margin-right: 20rpx;"
									@click="getImg2(img7,index7)"
								></image>
							</view>

							<!-- 第8个 -->
							<u-steps-item
								v-if="data.serverlog.length >= 8"
								:title="list8.msg"
								:desc="list8.time + ' ' + '手机号' + list8.mobile"
							></u-steps-item>
						</u-steps>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { xcorderdetail } from '@/common/api.js';
import { _containerHeight } from '@/utils/GetSys.js';
export default {
	data() {
		return {
			containerHeight: '',
			OriginData: null, //上一页传来订单数据
			NewOrderData: null, //按订单请求的最新数据
			data: null,
			id: '',
			list6: '',
			list7: '',
			list8: ''
		};
	},
	methods: {
		getDetails() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: this.id
			};
			xcorderdetail(params).then(res => {
				this.data = res.data.data;
				if (res.data.data.serverlog.length == 6) {
					this.list6 = res.data.data.serverlog[5];
				} else if (res.data.data.serverlog.length == 7) {
					this.list6 = res.data.data.serverlog[5];
					this.list7 = res.data.data.serverlog[6];
				} else if (res.data.data.serverlog.length == 8) {
					this.list6 = res.data.data.serverlog[5];
					this.list7 = res.data.data.serverlog[6];
					this.list8 = res.data.data.serverlog[7];
				}
				console.log(this.list6, this.list7, this.list8);
			});
		},
		getImg1(item,index ) {
			uni.previewImage({
				current: index,
				urls: [item],
				success: res => {
					console.log(res);
				}
			});
		},
		getImg2(item,index) {
			uni.previewImage({
				current: index,
				urls: [item],
				success: res => {
					console.log(res);
				}
			});
		}
	},
	onLoad(Source) {
		this.containerHeight = _containerHeight();
		this.id = Source.id;
		this.getDetails();
	}
};
</script>

<style lang="scss">
.staff-order-details {
	.custom-step {
		.u-steps-item__content--column {
			margin-left: 20rpx !important;
			margin-top: -8rpx !important;
			height: 120rpx !important;
			.u-text {
				flex: none !important;
			}
		}
		.u-steps-item {
		}

		.u-steps-item__wrapper--column--dot {
			width: 20rpx !important;
			height: 20rpx !important; //dot
		}
		.u-steps-item__wrapper__dot {
			width: 20rpx !important;
			height: 20rpx !important; //dot
		}
		.u-steps-item__line--column {
			left: 10rpx !important;
		}
		.u-steps--column {
			min-height: 300rpx;
			.u-steps-item--column {
				.u-text__value--content {
					font-size: 26rpx !important; //标题
				}
				.u-text__value--tips {
					font-size: 26rpx !important; //时间
				}
			}
		}
		.u-text__value {
			font-size: 30rpx !important;
			font-family: PingFang SC-Medium, PingFang SC !important;
			font-weight: 500 !important;
			color: #333333 !important;
		}
	}
}
.u-steps-item__line {
	height: 0;
}
u-steps {
	position: relative;
}
</style>
